﻿@page "/datagrid/command-column"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates CRUD operations in DataGrid using command column. You can perform CRUD operations as follows,</p>
      <ul>
         <li><strong>Edit</strong> - To edit record, double click a row or click Edit button from command column after selecting a row </li>
         <li><strong>Delete</strong> - To delete record, click Delete button from command column after selecting a row </li>
         <li><strong>Update</strong>,<strong>Cancel</strong> - You can save or discard changes by clicking Update and Cancel button from the command column respectively</li>
     </ul>
</SampleDescription>
<ActionDescription>
    <p>The DataGrid provides an option to render CRUD action buttons in a column by using the CommandColumn feature. The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands'>GridCommandColumns</a></code>  of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html'>GridColumn</a></code> component accepts array of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.CommandModel.html'>GridCommandColumn</a></code> components. The predefined command button can be defined by using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CommandModel.html#Syncfusion_Blazor_Grids_CommandModel_Type'>Type</a></code> property of the GridCommandColumn component.</p>
    <p>The built-in command buttons are,</p>
    <ul>
        <li><strong>Edit</strong></li>
        <li><strong>Delete</strong></li>
        <li><strong>Cancel</strong></li>
    </ul>
    <p>More information on the Command column editing can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/editing/#command-column'>documentation section</a>.</p>
    <p>You can refer to our <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-datagrid/editing'>Blazor Editable Grid</a> page to know more about editing and its feature representations. </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" AllowPaging="true">
                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="TextAlign.Right" Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" ValidationRules="@(new ValidationRules{ Required=true, Range = new double[]{1, 1000}})" EditType="EditType.NumericEdit" Format="C2" TextAlign="TextAlign.Right" Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
                    <GridColumn HeaderText="Manage Records" Width="150">
                        <GridCommandColumns>
                            <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })"></GridCommandColumn>
                            <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })"></GridCommandColumn>
                            <GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-save", CssClass="e-flat" })"></GridCommandColumn>
                            <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-cancel-icon", CssClass="e-flat" })"></GridCommandColumn>
                        </GridCommandColumns>
                    </GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
